<template>
	<div :id="id" :class="className" :style="{width: width, height: height}"/>
</template>

<script>
import echarts from 'echarts'

export default {
	props: {
		className: {
			type: String,
			default: 'chart'
		},
		id: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '200px'
		},
		height: {
			type: String,
			default: '200px'
		},
		items: {
			type: Object,
			default: () => {
			}
		},
		typeName: {
			type: String,
			default: '功率'
		},
		number: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			chart: null
		}
	},
	mounted() {
		this.initChart()
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		this.chart.dispose()
		this.chart = null
	},
	methods: {
		initChart() {
			var dept = ''
			var xTitle = []
			var currentData = []
			if (Object.keys(Object.assign({}, this.items)).length) {
				var items = this.items
				xTitle = items.time
				items.data.map((_) => {
					console.log({number: this.number})
					if (_.number === this.number) {
						dept = _.name
						currentData = this.typeName === '功率' ? _.power : this.typeName === '电压' ? _.voltage : _.current
					}
				})
			}
			this.chart = echarts.init(document.getElementById(this.id))

			this.chart.setOption({
				title: {
					top: 20,
					text: this.typeName,
					textStyle: {
						fontWeight: 'normal',
						fontSize: 14,
						color: '#4eb9e6'
					},
					left: '20px'
				},
				tooltip: {
					trigger: 'axis',
					extraCssText: 'width: 170px'
				},
				grid: {
					top: 78,
					left: 60,
					right: 35,
					bottom: 20,
					containLabel: true
				},
				xAxis: [{
					type: 'category',
					boundaryGap: false,
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 18,
						textStyle: {
							fontSize: 14,
							color: '#a2cfe5'
						},
						formatter: function (params) {
							var s = params.split(' ')
							if (s[1]) {
								return s[0] + '\n' + s[1]
							} else {
								return s[0]
							}
						}
					},
					axisTick: {
						show: false
					},
					splitArea: {
						show: true,
						areaStyle: {
							color: ['rgba(33, 77, 108, 0.2)', 'rgba(33, 77, 108, 0.5)']
						}
					},
					data: xTitle
				}],
				yAxis: [{
					type: 'value',
					axisTick: {
						show: false
					},
					axisLine: {
						show: false
					},
					axisLabel: {
						margin: 10,
						textStyle: {
							fontSize: 14,
							color: '#a2cfe5'
						}
					},
					splitNumber: 2,
					splitLine: {
						show: false
					}
				}],
				series: [
					{
						name: dept + ' ' + this.typeName + ': ',
						type: 'line',
						smooth: true,
						symbol: 'circle',
						symbolSize: 5,
						showSymbol: true,
						lineStyle: {
							normal: {
								width: 4,
								color: '#00d5af'
							}
						},
						areaStyle: {
							normal: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
									offset: 0,
									color: 'rgba(0, 213, 175, 0.3)'
								}, {
									offset: 0.8,
									color: 'rgba(0, 213, 175, 0)'
								}], false),
								shadowColor: 'rgba(0, 0, 0, 0.1)',
								shadowBlur: 10
							}
						},
						itemStyle: {
							normal: {
								color: 'rgb(0, 213, 175)',
								borderColor: 'rgba(0, 213, 175, 0.2)',
								borderWidth: 12
							}
						},
						data: currentData
					}
				]
			})

			this.$emit('func', this.chart)
		}
	}
}
</script>
